<template>
  <el-header>
      <el-button class="right-btn" type="primary" @click="one">返回</el-button>
    </el-header>
  <div class="main">
    <el-steps :active="active" finish-status="success" space="200px" align-center>
      <el-step v-for="(item, index) of stepTitle" :key="index" :title="item" @click.native="handleStep(index)" />
    </el-steps>
    <router-view @handleNextStep="handleNextStep()" @handleLastStep="handleLastStep()" />
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
  setup() {
    const route = useRoute()
    const router = useRouter()
    const one = () => {
      router.push("./project")
    }
    const data = reactive({
      active: 0,
      // 已选步骤
      stepSuc: [0],
      stepTitle: ['基本信息', '人员配置', '进度配置']
    })
    const handleStep = (val: any) => {
      if (data.stepSuc.includes(val) === true) {
        data.active = val;
        if (data.active == 0) {
          router.push("/info");
        } else if (data.active == 1) {
          router.push("/staffing");
        } else if (data.active == 2) {
          router.push("/process");
        }
      }
    };
    const handleLastStep = () => {
      console.log("上一步")
      if (--data.active == 0) {
        router.push("/info");
      } else if (data.active == 1) {
        router.push("/staffing");
      } else if (data.active == 2) {
        router.push("/process");
      }
    };
    const handleNextStep = () => {
      //e ={id:'1'}
      data.stepSuc.push(++data.active)
      if (data.active == 0) {
        router.push('/info');
      } else if (data.active == 1) {
        router.push('/staffing');
      } else if (data.active == 2) {
        router.push("/process");
      }
    }
    const watch = () => {
      if (route.path == '/process') {
        data.active = 2
        data.stepSuc = [0, 1, 2]
      } else {
        console.log("错误");
      }
    };
    onMounted(() => {
      watch()
    });
    return { one, ...toRefs(data), handleStep, handleLastStep, handleNextStep, watch }
  },
})
</script>

<style scoped>
.right-btn {
  float: right;    
  height: 30px;
  line-height: 10px;   
}
.main {
  padding: 18px 12px 16px;
  margin: auto;
}

.pane {
  margin-top: 25px;
  padding: 18px 12px 16px;
}

.stepSuc :hover {
  cursor: pointer;
}

.stepErr :hover {
  cursor: not-allowed;
}

</style>